﻿@mixin transition($transition){
	-webkit-transition: $transition;
	-moz-transition: $transition;
	transition: $transition;
}
.lifeSidebar{
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100;
	width: 29px;
	height: 100%;
	border-right: 6px solid #333;
	>ul{
		position: fixed;		
		right: 0;
		width: 35px;		
		>li{
			float: left;
			position: relative;
			width: 35px;
			height: 35px;
			margin-bottom:2px;
			.tit{
				display: block;
				position: relative;
				z-index: 1;
				width: 35px;
				height: 35px;
				color: #fff;
				border-radius: 3px 0 0 3px;
				background-color: #333;
				cursor: pointer;
				i.icon{
					width:35px;
					height:35px;
					position:relative;
					display:block;
					overflow:hidden;	
					background-color: #333;	
					z-index:2;			
					border-radius: 3px 0 0 3px;
					background-image:url(../../../resources/img/side-bar.png);
				}
				.txt{
					position: absolute;
					top: 0;
					left: 35px;
					z-index: 1;
					width: 62px;
					height: 35px;
					background-color: #333;
					text-align: center;
					line-height: 35px;
					border-radius: 3px 0 0 3px;					
					@include transition(left .3s ease-in-out .1s);
				}
			}
			.tit:hover{
				background-color: #03a9f4;
				i.icon{
					background-color: #03a9f4;
				}
				.txt{
					left: -60px;
					background-color: #03a9f4;
				}
			}
		}
		
	}
	.sidebarUl{		
		top: 130px;		
		.shoppingcartLi{
			.icon.shoppingcart{
				background-position: -12px -12px;				
			}		
			.icon.shoppingcartCount{
				width: 14px;
    			height: 14px;
				position:relative;
				left: 14px;
			    top: -43px;
			    background-position: -203px -24px;
			    background-color: transparent;
			    div{			    	
					position: absolute;
					font-style: normal;
					top: -2px;
					left: 3px;
			    }
			}	
			.shoppingcartContainer{				
				position:absolute;
				width:300px;				
				left: 35px;
				top: 0;
				background-color:#fff;
				z-index: 5;
				font-size:12px;
				border-radius:5px;
				@include transition(left .5s ease-in-out .1s);
				.shoppingcartTitle{
					height:30px;
					line-height:30px;
					border-bottom:1px solid #03a9f4;
					.th{
						padding:10px;
					}					
					.close{
						position: absolute;
						right: 17px;
						top: 9px;
						z-index: 8;
						cursor: pointer;
						width: 12px;
						height: 12px;
						background:url(../../../resources/dep/ECar/modal/img/close.png);
					}
				}
				.shoppingcartContentUl{
					border-bottom:1px solid #e3e3e3;
					max-height:374px;
					overflow:hidden;
					.shoppingcartContentLi{
						border-bottom:1px solid #f7f7f7;
						overflow:hidden;
						>div{
							float:left;							
						}
						.img{							
							width:70px;							
							img{							
								width:50px;
								height:50px;
								margin:10px;
							}
						}
						.desc{
							width:130px;							
							.descTitle{
								padding:5px 0;
								color:#333;
							}
							.descColor{
								color:#999;
							}
						}	
						.price{
							width:70px;
							margin-left:20px;
							color:#e51c23;
							text-align:center;
							div{
								height:12px;
								line-height:12px;
							}
							.first{
								margin-top:6px;
							}
							.last{
								margin-bottom:6px;
							}
							.delete{
								padding-right:5px;
								text-align:right;
								color:#333;
								cursor:pointer;
							}
						}
					}		
					li:last-child{
						border-bottom:none;
					}			
				}
				.shoppingcartCheck{
					height:30px;
					padding:10px;
					button{
						float:right;
						width:130px;
						height:30px;
						color:#fff;
						font-size:16px;
						border: none;
						cursor:pointer;
						outline: none;
						background-color:#e51c23;
						border-radius:3px;
					}
				}
			}
		}
		.weixinLi{
			.icon.weixin{
				background-position: -72px -12px;
			}
		}
	}
	.sidebarReturnUl{
		bottom: 50px;	
		.sidebarReturnLi{
			.icon.iconTop{
				background-position: -132px -12px;
			}
		}	
	}
}